import React from 'react'
import {
  autorun,
  observable,
  getObservableMaker,
  observe,
  define,
} from '@formily/reactive'

const observableAnnotation = getObservableMaker(observable)

const target2 = {
  o1: {
    o2: {
      v2: 'v2',
    },
  },
}

const target2Proxy = observableAnnotation({ value: target2 })

const comp = observable.computed(() => {
  return target2Proxy.o1.o2.v2
})

/**
 * 自定义 computed target，即为 A
 */
class A {
  _value = 0
  constructor() {
    define(this, {
      _value: observable.ref,
      value: observable.computed,
    })
  }

  get value() {
    return this._value
  }
}

// 1. 验证依赖 computed 的 reaction 卸载后清除掉 computed 的 reaction
// const dispose = autorun(() => {
//   console.log('compute: ', comp.value)
// })
//
// autorun(() => {
//   console.log('compute: ', comp.value)
// })
//
// setTimeout(() => {
//   // debugger
//   // 卸载之后，computed 还有一些属性依赖，所以在 suspendComputedReactions 不会清除掉 computed 的 reaction
//   dispose()
// }, 1000)
//

// 2. 验证 computed 的 value 会构建 data tree
// observe(target2Proxy, (value) => {
//   console.log('有子内容变化啦~~~', value)
// })
//
// setTimeout(() => {
//   target2Proxy.o1.o2.v2 = '123'
// }, 1000)

export default () => <div>observable-test</div>
